<template>
  <div>
    <!-- 健康报告-家长端 -->
    <div class="report_box">
      <!-- 头部 -->
      <div class="report_header">
        <div class="header_left">
          <img src="../../../static/img/logos.png" />
          <div>
            <p>健康生活系统</p>
            <p>Healthy living system</p>
          </div>
        </div>
        <div class="header_right">
          <div class="site-navbar_add_right">
            <!-- 咨询轮播 -->
            <div class="site-navbar_add_swiper">
              <img src="../../../static/img/zhixun.png" />
              <div class="site-navbar_add_swiper_box">
                <el-carousel
                  height="0.1042rem"
                  direction="vertical"
                  :autoplay="true"
                >
                  <el-carousel-item v-for="item in swiper_arr" :key="item.text">
                    <p>{{ item.text }}</p>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <!-- 用户信息 -->
            <div class="site-navbar_add_user">
              <div class="site-navbar_input">
                <input type="text" placeholder="请输入关键字" />
                <img src="../../../static/img/search_icon.png" />
              </div>
              <p></p>
              <!-- <el-dropdown>
            <div class="site-navbar_down_icon">
              
            </div>
            <p>李千梓</p>
            <div class="site-navbar_head_icon">
              <img src="../../../static/img/head_icon.png" />
            </div>
          </el-dropdown> -->
              <el-dropdown @command="clickItem">
                <span class="el-dropdown-link">
                  <div>
                    <img src="../../../static/img/down_icon.png" />
                  </div>
                  <span>李千梓</span>
                  <div class="site-navbar_head_icon">
                    <img src="../../../static/img/head_icon.png" />
                  </div>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-edit-outline"
                    >编辑资料</el-dropdown-item
                  >
                  <el-dropdown-item icon="el-icon-bell"
                    >消息通知</el-dropdown-item
                  >
                  <el-dropdown-item
                    icon="el-icon-switch-button"
                    command="logout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section_box">
      <div class="container-homework">
        <!-- 头部 -->
        <div class="health_head">
          <div class="health_left">
            <img src="../../../static/img/head_icon.png" />
            <div>
              <p>李千梓</p>
              <p>
                <span>五年级下学期</span>
                <span>|</span><span>| NO.39580</span>
              </p>
            </div>
            <div>
              <div class="leng_ju">
                <div></div>
              </div>
              <p>
                <span>78</span>
                <span>综合得分</span>
              </p>
            </div>
          </div>

          <div class="health_right">
            <p v-for="(item, index) in circle_arr" :key="index">
              <span :style="{ background: item.color }"></span>
              <span>{{ item.name }} {{ item.num }}</span>
            </p>
          </div>
        </div>
        <el-divider></el-divider>
        <!-- 主体结构 -->
        <!-- 雷达图 -->
        <div class="radar">
          <div>
            <div class="same_title">
              <p></p>
              <p>体质结构</p>
            </div>
            <!-- 雷达盒子 -->
            <div class="radar_box">
              <div
                id="main"
                style="width: 2.366rem; height: 1.9rem; margin: 0 auto"
              ></div>
            </div>
            <p>
              总体体测成绩属于中等水平，请注意下肢爆发力的锻炼，如多做做蹲马步。此处为体测点评，体育老师输入
            </p>
          </div>
          <div>
            <div class="same_title">
              <p></p>
              <p>技能分析</p>
            </div>
            <!-- 雷达盒子 -->
            <div class="radar_box">
              <div
                id="main2"
                style="width: 2.366rem; height: 1.9rem; margin: 0 auto"
              ></div>
            </div>
            <p>各项成绩都很不错，再接再厉！此处技能点评，体育老师输入</p>
          </div>
          <div>
            <div class="same_title">
              <p></p>
              <p>生理结构</p>
            </div>
            <!-- 雷达盒子 -->
            <div class="radar_box">
              <div
                id="main3"
                style="width: 2.366rem; height: 1.9rem; margin: 0 auto"
              ></div>
            </div>
            <p>注意保护视力……此处为学生体检评价，健康老师输入</p>
          </div>
        </div>

        <el-divider></el-divider>
        <!-- 建议选择课程 -->
        <div class="active_class">
          <div class="same_title">
            <p></p>
            <p>建议选择课程</p>
          </div>

          <div class="active_box">
            <div class="active_type">
              <div class="active_one">
                <div></div>
                <p>足球</p>
              </div>
            </div>
            <div class="active_else">
              <p>其它推荐课程</p>
              <p>
                兵乓球、羽毛球、网球、棒球、体育舞蹈、游泳、啦啦操、橄榄球、射箭、击剑等
              </p>
            </div>
          </div>
        </div>

        <el-divider></el-divider>

        <!-- 饮食建议 -->
        <div class="food_active">
          <div class="same_title">
            <p></p>
            <p>今日饮食建议</p>
          </div>

          <div class="food_box">
            <div class="food_one">
              <div>
                <img src="../../../static/img/zao.png" alt="" srcset="" />
                <p>早餐</p>
              </div>
              <div>
                先可以肯定早餐适量摄取一些食物，对人体非常有益，可以选择以下几类的食物：1、谷类的食物，例如全麦的饼干面包，及麦片粥等等。2、奶和豆制品，例如牛奶，能够提供人体丰富的蛋白质，还有适当钙质。3、水果，例如柑橘、苹果等，含有大量的维生素
              </div>
            </div>

            <div class="food_one">
              <div>
                <img src="../../../static/img/zhong.png" alt="" srcset="" />
                <p>中餐</p>
              </div>
              <div>
                能够提供人体所需要的一些微量元素。4、例如摄取肉制品，像鸡肉或牛肉。5、还要适量去摄入一些蔬菜。综合以上
              </div>
            </div>

            <div class="food_one">
              <div>
                <img src="../../../static/img/wan.png" alt="" srcset="" />
                <p>晚餐</p>
              </div>
              <div>
                首先可以肯定早餐适量摄取一些食物，对人体非常有益，可以选择以下几类的食物：1、谷类的食物，例如全麦的饼干面包，及麦片粥等等。2、奶和豆制品，例如牛奶，能够提供人体丰富的蛋白质，还有适当钙质。3、水果，例如柑橘、苹果等，含有大量的维生素C，
              </div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>

        <!-- 作息建议 -->
        <div class="rest_active">
          <div class="same_title">
            <p></p>
            <p>作息建议</p>
          </div>
          <!-- 柱状图 -->
          <div class="self_pie">
            <div class="self_left">
              <div class="self_left_box">
                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>
              </div>
              <div class="self_left_text">
                <p>21:00 入睡</p>
                <p>07:00 醒来</p>
              </div>
            </div>
            <div class="self_left">
              <div class="self_left_box">
                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>

                <div class="self_s"></div>
                <div class="self_q"></div>
              </div>
              <div class="self_left_text">
                <p>13:00 入睡</p>
                <p>13:45 醒来</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiper_arr: [{ text: '555555555555555555' }, { text: '6666666666666666666' }],
      search: {
        type: '', //类型
        about_text: '', //相关内容
        work_text: '' //合作方内容
      },
      // 分页
      total: 1000,
      // 列表数据
      tableData: [{
        number: 'AM01', //编号
        root_name: '跳绳', //设备名称
        school: '学校名称小太阳机构', //学校
        address: '深圳/南山',  //学校地址
        type: '协调',  //类型
        status: '待激活',  //状态
        out_time: '2020年5月2号',  //出库时间
        bind_time: '2020年5月2号', //绑定时间
        bind_user: '王小二', //绑定用户

        // operation: '操作'
      }],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '详情'
      }],
      // operVal
      operVal: '',
      circle_arr: [
        { name: '上次成绩', color: '#FE7C73' },
        { name: '本次成绩', color: '#24AAFF' },
        { name: '平均成绩', color: '#18FFC2' }
      ],

    }
  },
  created() {
    this.getWorkTable()
  },
  methods: {
    clickItem(command) {
      this[command]();
    },
    change(id) {
      if (this.operVal === '2') {
        this.$router.push({ path: `/commission_details`, query: { id } })
        this.operVal = ''
      } else {
        this.operVal = ''
      }
    },
    // 作业管理首页表
    getWorkTable() {
      this.$http({
        url: this.$http.adornUrl('queryPageTimetable'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": 0,
          "pageSize": 2,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log(res);
      })
    },
    myEcharts() {
      let myChart = this.$echarts.init(document.getElementById('main'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          text: '70%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          }
        },
        legend: {
          borderWidth: 0
        },

        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 12
            },
            formatter: function (value) {
              let list = value.split("");
              let text = [];
              let result = '';
              for (let i = 3; i <= list.length - 2; i++) {
                text.push(list[i]);
              }
              if (list[1] == 'a') {
                for (let j = 1; j <= text.length; j++) {
                  result += text[j - 1];
                }
              }
              if (list[1] == 'b') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 5) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }
              if (list[1] == 'c') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 5) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }

              return list[0] + list[1] + list[2] + result + list[list.length - 1];
            },


            rich: {
              a: {
                color: '#0FDD8D'
              },
              b: {
                color: '#0FDD8D',
                align: 'left',
              },
              c: {
                color: '#0FDD8D'
              }
            },
          },
          indicator: [
            { name: '{a|销售啦信息（不需要换行)}', max: 10 },
            { name: '{b|管理员工形象啊}', max: 10 },
            { name: '{c|研发预算开发}', max: 10 }
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.setOption(option)
    },
    myEcharts2() {
      let myChart = this.$echarts.init(document.getElementById('main2'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          text: '78%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          }
        },
        legend: {
          borderWidth: 0
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 12
            },
            formatter: function (value) {
              let list = value.split("");
              let text = [];
              let result = '';
              for (let i = 3; i <= list.length - 2; i++) {
                text.push(list[i]);
              }
              if (list[1] == 'a') {
                for (let j = 1; j <= text.length; j++) {
                  result += text[j - 1];
                }
              }
              if (list[1] == 'b') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 3) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }
              if (list[1] == 'c') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 4) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }

              return list[0] + list[1] + list[2] + result + list[list.length - 1];
            },


            rich: {
              a: {
                color: '#0FDD8D'
              },
              b: {
                color: '#0FDD8D',
                align: 'left',
              },
              c: {
                color: '#0FDD8D'
              }
            },
          },
          indicator: [
            { name: '{a|销售啦信息（不需要换行)}', max: 10 },
            { name: '{b|管理员工形象啊}', max: 10 },
            { name: '{c|研发预算开发}', max: 10 }
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.setOption(option)
    },
    myEcharts3() {
      let myChart = this.$echarts.init(document.getElementById('main3'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          text: '78%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 20,
          }
        },
        legend: {
          borderWidth: 0
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 12
            },
            formatter: function (value) {
              let list = value.split("");
              let text = [];
              let result = '';
              for (let i = 3; i <= list.length - 2; i++) {
                text.push(list[i]);
              }
              if (list[1] == 'a') {
                for (let j = 1; j <= text.length; j++) {
                  result += text[j - 1];
                }
              }
              if (list[1] == 'b') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 3) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }
              if (list[1] == 'c') {
                for (let j = 1; j <= text.length; j++) {
                  if (!(j % 4) && text[j] != undefined) {
                    result += text[j - 1] + '\n';
                  } else {
                    result += text[j - 1];
                  }
                }
              }

              return list[0] + list[1] + list[2] + result + list[list.length - 1];
            },


            rich: {
              a: {
                color: '#0FDD8D'
              },
              b: {
                color: '#0FDD8D',
                align: 'left',
              },
              c: {
                color: '#0FDD8D'
              }
            },
          },
          indicator: [
            { name: '{a|销售啦信息（不需要换行)}', max: 10 },
            { name: '{b|管理员工形象啊}', max: 10 },
            { name: '{c|研发预算开发}', max: 10 }
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.setOption(option)
    },
  },
  computed: {

  },
  mounted() {
    this.$nextTick(function () {
      this.myEcharts();
      this.myEcharts2()
      this.myEcharts3()
    })
  }
}
</script>

<style lang="scss" scoped>
.section_box {
  padding: 0.1302rem;
  padding-top: 0;
  padding-bottom: 0.1563rem;
}
.report_box {
  padding: 0.1302rem;
  background-color: #f7fafc;
}
.report_header {
  border-radius: 0.0781rem;
  height: 0.4167rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.header_left {
  width: 1.6667rem;
  background-color: #0fdd8d;
  height: 0.4167rem;
  display: flex;
  align-items: center;
  justify-content: center;
  > img {
    width: 0.3008rem;
    margin-right: 0.1146rem;
  }
  > div {
    > p:first-child {
      font-size: 0.1042rem;
      color: #fff;
    }
    > p:nth-of-type(2) {
      font-size: 0.0525rem;
      color: #fff;
    }
  }
}
.header_right {
  width: calc(100% - 1.6667rem);
  background-color: white;
  border-top-right-radius: 0.0781rem;
  border-bottom-right-radius: 0.0781rem;
}
.site-navbar_add_right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 0.0885rem;
  padding-right: 0.1823rem;
}

.site-navbar_add_swiper_box {
  min-width: 2.6042rem;
  max-width: 4.1667rem;
  margin-left: 0.1042rem;
  height: 0.1042rem;
  line-height: 0.1042rem;
}
.site-navbar_add_swiper {
  display: flex;
  align-items: center;
}
.site-navbar_add_swiper > img {
  width: 0.3698rem;
}
.site-navbar_add_user {
  display: flex;
  align-items: center;
}
.site-navbar_add_user > p:nth-of-type(1) {
  height: 0.2604rem;
  width: 0.0052rem;
  background-color: #f8f8f8;
  margin: 0 0.1563rem;
}
.site-navbar_add_user > p:nth-of-type(2) {
  font-size: 0.0938rem;
  color: #525252;
  margin: 0 0.1042rem;
}
.site-navbar_input {
  width: 1.0313rem;
  height: 0.1667rem;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.0208rem 0.0573rem;
  border-radius: 0.0885rem;
}
.site-navbar_input input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #cecece;
  font-size: 0.0729rem;
}
.site-navbar_input input {
  width: 80%;
  font-size: 0.0729rem;
  border: none;
  background-color: #f8f8f8;
}
.site-navbar_down_icon img {
  width: 0.1042rem;
  height: 0.1042rem;
}
.site-navbar_head_icon img {
  width: 0.2396rem;
  height: 0.2396rem;
}
.site-navbar_input img {
  width: 0.125rem;
  height: 0.125rem;
}
.el-carousel__item p {
  color: #888888;
  font-size: 0.0729rem;
}
.el-dropdown {
  position: relative;
  .el-dropdown-link {
    display: flex;
    line-height: 0.4167rem;
    div:first-child > img {
      width: 0.1042rem;
      height: 0.1042rem;
      justify-content: space-between;
    }
    span {
      margin: 0 0.099rem;
      font-size: 0.0938rem;
      color: #525252;
    }
    & > img {
      width: 0.2917rem;
      height: 0.2917rem;
    }
  }
  /deep/.el-dropdown-menu__item {
    width: 0.9896rem;
    height: 0.2604rem;
  }
}
.same_title {
  display: flex;
  align-items: center;
  > p:first-child {
    width: 0.0104rem;
    height: 0.0833rem;
    background-color: #0fdd8d;
    margin-right: 0.0313rem;
  }
  > p:nth-of-type(2) {
    color: #888888;
    font-size: 0.0833rem;
  }
}
.search_box {
  padding: 0.0781rem 0.1302rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  margin-bottom: 0.1302rem;
  // 筛选部分
  .screen {
    .tworow {
      display: flex;
      justify-content: space-between;
      .twoleft {
        display: flex;
        align-items: center;
        .change_type_box {
          display: flex;
          align-items: center;
          background-color: #f7fbfc;
          border-radius: 0.0521rem;
          padding: 0.0573rem 0.0521rem;
          margin-right: 0.1042rem;
          .change_select1 {
            width: 0.8rem;
            font-size: 0.0729rem;
          }
          .change_input2 {
            width: 1.5rem;
          }
          /deep/ .el-input--medium .el-input__inner {
            color: #000;
            font-size: 0.0729rem;
            border: none;
            background-color: #f7fbfc;
            height: 0.1042rem;
            line-height: 0.1042rem;
          }
          /deep/ input::-webkit-input-placeholder {
            /* placeholder颜色  */
            color: #888888;
            font-size: 0.0729rem;
          }
          /deep/.el-input--medium .el-input__icon {
            line-height: 0.1042rem;
          }
          > p {
            width: 0.0052rem;
            height: 0.0885rem;
            background-color: #dae2e4;
          }
        }
        .change_input1 {
          width: 1.5rem;
          border-radius: 0.0521rem;
          overflow: hidden;
          margin-right: 0.1042rem;
        }
        /deep/ .el-input--medium .el-input__inner {
          color: #000;
          font-size: 0.0729rem;
          border: none;
          background-color: #f7fbfc;
          height: 0.2188rem;
          line-height: 0.2188rem;
        }
        /deep/ input::-webkit-input-placeholder {
          /* placeholder颜色  */
          color: #888888;
          font-size: 0.0729rem;
        }

        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
    }
  }
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 头部
  .health_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .health_left {
      display: flex;
      align-items: center;
      img {
        width: 0.5208rem;
        height: 0.5208rem;
        margin-right: 0.1354rem;
      }
      > div:nth-of-type(1) {
        margin-right: 0.2344rem;
        > p:first-child {
          color: #525252;
          font-size: 0.1875rem;
          margin-bottom: 0.0521rem;
        }
        > p:nth-of-type(2) {
          display: flex;
          align-items: center;
          span {
            font-size: 0.0729rem;
            color: #888888;
            margin-right: 0.026rem;
          }
        }
      }
      > div:nth-of-type(2) {
        .leng_ju {
          width: 1.35rem;
          height: 0.0729rem;
          background-color: #f7fafc;
          margin-bottom: 0.0781rem;

          > div {
            height: 0.0729rem;
            width: 80%;
            background-color: #0fdd8d;
            border-top-right-radius: 0.0521rem;
            border-bottom-right-radius: 0.0521rem;
          }
        }
        > p {
          > span:first-child {
            color: #0fdd8d;
            font-size: 0.125rem;
          }
          > span:nth-of-type(2) {
            color: #888888;
            font-size: 0.0729rem;
          }
        }
      }
    }

    .health_right {
      display: flex;
      align-items: center;
      > p {
        display: flex;
        align-items: center;

        span {
          font-size: 0.0625rem;
          color: #888888;
          margin-right: 0.1563rem;
        }
        > span:nth-of-type(1) {
          width: 0.0833rem;
          height: 0.0833rem;
          margin-right: 0.0521rem;
        }
      }
      .main_text > p:last-child {
        margin-bottom: 0;
      }
    }
  }
  // 雷达
  .radar {
    display: flex;
    align-items: center;
    > div {
      width: 33.333%;
      border-right: 0.0052rem dashed #e8e8e8;
      padding: 0 0.1042rem;
      .radar_box {
        margin-top: 0.1563rem;
      }
      > p {
        color: #888888;
        font-size: 0.0729rem;
      }
    }
  }
}
.active_box {
  display: flex;
  margin: 0.1563rem 0;
}
.active_else {
  margin-left: 0.4167rem;
  width: 1.3906rem;
  > p:first-child {
    color: #525252;
    font-size: 0.0729rem;
    margin-bottom: 0.0521rem;
  }
  > p:nth-of-type(2) {
    color: #888888;
    font-size: 0.0625rem;
    line-height: 1.6;
  }
}
.active_type {
  display: flex;
  align-items: center;
  .active_one {
    margin-right: 0.125rem;
    > div {
      width: 0.6rem;
      height: 0.43rem;
      background-color: gainsboro;
      border-radius: 0.0521rem;
    }
    > p {
      color: #888888;
      font-size: 0.0729rem;
      text-align: center;
      margin-top: 0.1042rem;
    }
  }
}
.food_box {
  display: flex;
  justify-content: space-between;
  margin: 0.1563rem 0;
  .food_one {
    width: 30%;
    > div:first-child {
      display: flex;
      align-items: center;
      margin-bottom: 0.0521rem;
      > img {
        width: 0.1563rem;
        height: 0.1563rem;
        margin-right: 0.0521rem;
      }
      > p {
        color: #343434;
        font-size: 0.0833rem;
      }
    }
    > div:nth-of-type(2) {
      background-color: #f7fbfc;
      padding: 0.0677rem 0.0781rem;
      border-radius: 0.0781rem;
      font-size: 0.0729rem;
      color: #888888;
      line-height: 1.6;
      letter-spacing: 0.0026rem;
      min-height: 0.9375rem;
      line-height: 1.8;
    }
  }
}
.self_pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3125rem;
  margin-bottom: 0.1042rem;
  > div {
    width: 40%;
  }
}
.self_left {
  .self_left_box {
    display: flex;
    align-items: flex-end;
    .self_s {
      width: 10%;
      height: 0.3802rem;
      background-color: #18b87d;
    }
    .self_q {
      width: 10%;
      height: 0.2917rem;
      background-color: #74f8c8;
    }
  }
  .self_left_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.1042rem;
    p {
      color: #888888;
      font-size: 0.0625rem;
    }
  }
}
</style>
